<!-- 底部快捷方式 -->

<template>
  <div
    class="bookmark-container glass"
    :class="{
      remove: type === 'remove',
    }"
  >
    <div class="icon-container">
      <div class="icon" v-for="item in shortcutList" :title="item.name">
        <img
          class="icon-wrap"
          :src="item.icon"
          height="50"
          width="50"
          alt=""
          @click="openNewWindow(item.url)"
        />
      </div>
    </div>
    <!-- 添加书签快捷方式 -->
    <div class="plus-container glass" @click="openPlusModal">
      <svg viewBox="0 0 50 50">
        <path
          d="M 25 10 L 25 40"
          fill="none"
          stroke="var(--nature-color-1)"
          stroke-width="5"
          stroke-linecap="round"
        />
        <path
          d="M 10 25 L 40 25"
          fill="none"
          stroke="var(--nature-color-1)"
          stroke-width="5"
          stroke-linecap="round"
        />
      </svg>
    </div>
    <!-- 删除书签快捷方式 -->
    <div class="plus-container glass" @click="removeShortcut">
      <svg
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        width="40"
        height="40"
      >
        <path
          d="M630.09 151.91V62.16H361.84v89.74H93.6v134.62h89.41v673.11h625.93v-673.1h89.42V151.91H630.09zM361.84 869.89h-89.43V286.53h89.43v583.36z m178.84 0h-89.43V286.53h89.43v583.36z m178.84 0h-89.43V286.53h89.43v583.36z"
          fill="#FA596F"
          p-id="4274"
        ></path>
      </svg>
    </div>
  </div>
  <Teleport to="body">
    <Transition
      v-if="visible"
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <BookMark @close="visible = false" />
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";
import { EStorageKey, IShortcut } from "../../../utils";
import { getStorageData, setStorageData } from "../../../Background/storage";

const type = ref<"normal" | "remove">("normal");

const visible = ref<boolean>(false);
// 添加的modal组件
let BookMark: any;
const openPlusModal = () => {
  type.value = "normal";
  BookMark = defineAsyncComponent(() => {
    return import("../bookmark/index.vue");
  });
  visible.value = true;
};

/** 删除书签 */
const removeShortcut = () => {
  if (type.value === "remove") {
    type.value = "normal";
    return;
  }
  type.value = "remove";
};

const shortcutList = ref<IShortcut[]>([]);
const init = async () => {
  let localData = await getStorageData(EStorageKey.shortcut);
  if (localData) {
    shortcutList.value = localData;
  }
};
init();

const openNewWindow = async (url: string) => {
  type.value === "normal" && window.open(url, "_blank");

  if (type.value === "remove") {
    let localData = await getStorageData(EStorageKey.shortcut);
    const newData = localData?.filter((item) => item.url !== url);
    newData && (await setStorageData(EStorageKey.shortcut, newData));
  }
};

chrome.storage.onChanged.addListener(function (changes) {
  for (let [key, { newValue }] of Object.entries(changes)) {
    if (key === EStorageKey.shortcut) {
      shortcutList.value = newValue;
    }
  }
});
</script>

<style lang="scss" scoped>
@import "../../style/function.scss";

.bookmark-container {
  max-width: 80vw;
  position: fixed;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  border-radius: size();
  padding: size(0.5) size(2);
  display: flex;
  justify-content: center;
  display: flex;

  .icon-container {
    display: flex;
    gap: size(2);
    flex: 1;

    .icon {
      position: relative;

      &:nth-last-child(1) {
        margin-right: size(2);
      }

      &::before {
        content: attr(title);
        width: auto;
        text-wrap: nowrap;
        position: absolute;
        padding: size(0.2) size();
        background-color: var(--nature-bg-1);
        color: var(--nature-color-1);
        left: 50%;
        top: 0%;
        transform: translate(-50%, -50%);
        border-radius: size(0.5);
        transition: animate(top, bounce);
        visibility: hidden;
      }

      &:hover {
        &::before {
          visibility: visible;
          top: -50%;
        }
      }
    }

    img {
      cursor: pointer;
      user-select: none;
      filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));

      &:hover {
        animation-name: rubberBand;
        animation-duration: 0.5s;
      }
    }
  }

  .plus-container {
    width: 50px;
    min-width: 50px;
    height: 50px;
    position: sticky;
    right: 0px;
    bottom: 0px;
    border-radius: size();
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    & + .plus-container {
      margin-left: size();
    }
    &:hover {
      animation-name: rubberBand;
      animation-duration: 1s;
      svg {
        path {
          stroke: var(--primary-color);
        }
      }
    }
  }
}
.remove {
  background: rgba(150, 2, 2, 0.568);
}
</style>
